<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .view {
        width: 1000px;
        height: 500px;
        margin: 100px auto;
        border: 2px solid red;
        /* overflow-x: scroll; */
        overflow: hidden;
      }
      .wrap {
        height: 100%;
        overflow: hidden;
      }
      .wrap > li {
        height: 100%;
        float: left;
      }
    </style>
  </head>

  <body bgcolor="black">
    <!-- 视口 -->
    <div class="view">
      <!-- 容器 -->
      <ul class="wrap">
        <!-- 内容 -->
        <li
          style="
            background: url(../img/avatar.png) center center/cover no-repeat;
          "
        ></li>
        <li
          style="
            background: url(../img/defaultInteriorBackgroundBanner.jpg) center
              center/cover no-repeat;
          "
        ></li>
        <li
          style="
            background: url(../img/ico-wdzq@2x.png) center center/cover
              no-repeat;
          "
        ></li>
        <li
          style="
            background: url(../img/ico_star_press1@2x.png) center center/cover
              no-repeat;
          "
        ></li>
        <li
          style="
            background: url(../img/myimg.jpeg) center center/cover no-repeat;
          "
        ></li>
      </ul>
    </div>
    <script>
      //获取所需元素
      let _view = document.getElementsByClassName("view")[0];
      let _wrap = document.getElementsByClassName("wrap")[0];
      let _lis = document.getElementsByTagName("li");
      //动态设置宽高  容器的宽度 = 视口的宽度 * li的个数  li宽度 = 视口的宽度
      var _vw = _view.clientWidth;
      console.log(_vw);
      //复制一份容器
      _wrap.innerHTML += _wrap.innerHTML;
      //容器的宽度
      _wrap.style.width = _vw * _lis.length + "px";
      console.log(_wrap.style.width);
      for (var i = 0; i < _lis.length; i++) {
        _lis[i].style.width = _vw + "px";
      }
      // _view.scrollLeft = 4000
      // console.log(_view.scrollLeft)
      //初始值
      var time = null;
      //封装一张图片的运动过程
      function move() {
        if (_view.scrollLeft % _vw == 0) {
          //刚好一张图片的宽度
          clearInterval(time);
          setTimeout(_play, 2000);
        } else {
          _view.scrollLeft++;
          //判断临界值
          if (_view.scrollLeft >= _view.scrollWidth / 2) {
            _view.scrollLeft = 0;
          }
        }
      }
      //封装调用过程
      function _play() {
        _view.scrollLeft++;
        time = setInterval(move, 5);
      }
      //延迟定时器调用
      setTimeout(_play, 2000);
    </script>
  </body>
</html>
